﻿@page "/diagram/uml-class"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample represents a hospital management system using Diagram's built-in UML-class diagram shapes.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This example shows how to create class shapes using diagram <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html'>UMLClass</a> shapes.
        The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Type'>Type</a> property of the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UMLClassShapeStyle.html'>Shape</a> can be used to create UMLClass nodes. The Shape property of the shape allows you to create UML Class shapes.
    </p> <br>
</ActionDescription>

<div class="control-section">
    <SfDiagram Height="800px" NodeDefaults="@NodeDefaults" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
        <DiagramPageSettings>
            <DiagramFitOptions CanFit="true" Mode=FitModes.Width></DiagramFitOptions>
        </DiagramPageSettings>
    </SfDiagram>
</div>
@code
{

    // Defines diagram"s nodes collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    // Defines diagram"s connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }

    // Defines default values for DiagramNode object
    public DiagramNode NodeDefaults { get; set; }


    /// <summary>
    /// Initializing the objects
    ///</summary>
    protected override void OnInitialized()
    {
        InitDiagramModel();
    }


    private void InitDiagramModel()
    {
        NodeDefaults = new DiagramNode()
        {
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
        };
        NodeCollection = new ObservableCollection<DiagramNode>();
        ConnectorCollection = new ObservableCollection<DiagramConnector>();

        DiagramNode node1 = new DiagramNode()
        {
            Id = "Patient",
            OffsetX = 200,
            OffsetY = 250,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Patient",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },
                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="accepted",Type="Date", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" } },
                        new DiagramUmlClassAttribute(){ Name="sickness",Type="History", Style = new UMLParameterShapeStyle(){Color="white" ,StrokeColor = "white"}},
                        new DiagramUmlClassAttribute(){ Name="prescription",Type="String[*]", Style = new UMLParameterShapeStyle(){Color="white", StrokeColor = "white"}},
                        new DiagramUmlClassAttribute(){ Name="allergies",Type="String[*]", Style = new UMLParameterShapeStyle(){Color="white" ,StrokeColor = "white"}},
                    },
                    Methods = new ObservableCollection<DiagramUmlClassMethod>()
                {
                        new DiagramUmlClassMethod(){ Name="getHistory",Type="History", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }}
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node1);
        DiagramNode node2 = new DiagramNode()
        {
            Id = "Doctor",
            OffsetX = 240,
            OffsetY = 545,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Doctor",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },
                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="specialist",Type="String[*]", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }},
                        new DiagramUmlClassAttribute(){ Name="locations",Type="String[*]", Style = new UMLParameterShapeStyle(){Color="white" ,StrokeColor = "white"}}
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node2);
        DiagramNode node3 = new DiagramNode()
        {
            Id = "Person",
            OffsetX = 405,
            OffsetY = 105,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Person",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },
                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="name",Type="Name", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }},
                        new DiagramUmlClassAttribute(){ Name="title",Type="String[*]", Style = new UMLParameterShapeStyle(){Color="white" ,StrokeColor = "white"}},
                        new DiagramUmlClassAttribute(){ Name="gender",Type="Gender", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }},
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node3);
        DiagramNode node4 = new DiagramNode()
        {
            Id = "Hospital",
            OffsetX = 638,
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Hospital",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },

                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="name",Type="Name", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }},
                        new DiagramUmlClassAttribute(){ Name="address",Type="Address", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }},
                        new DiagramUmlClassAttribute(){ Name="phone",Type="Phone", Style = new UMLParameterShapeStyle(){Color="white" ,StrokeColor = "white"}},
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node4);
        DiagramNode node5 = new DiagramNode()
        {
            Id = "Department",
            OffsetX = 638,
            OffsetY = 280,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Department",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },

                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="getStaffCount",Type="Int", Style = new UMLParameterShapeStyle(){Color="white",StrokeColor = "white" }}
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node5);
        DiagramNode node6 = new DiagramNode()
        {
            Id = "Staff",
            OffsetX = 635,
            OffsetY = 455,
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = "Staff",
                    Style = new UMLClassShapeStyle() { Fill = "#26A0DA", StrokeColor = "white", Color = "white" },
                    Attributes = new ObservableCollection<DiagramUmlClassAttribute>()
                {
                        new DiagramUmlClassAttribute(){ Name="joined",Type="Date", Style = new UMLParameterShapeStyle(){Color="white" , StrokeColor = "white"}},
                          new DiagramUmlClassAttribute(){ Name="education",Type="string[*]", Style = new UMLParameterShapeStyle(){Color="white" , StrokeColor = "white"}},
                          new DiagramUmlClassAttribute(){ Name="certification",Type="string[*]", Style = new UMLParameterShapeStyle(){Color="white" , StrokeColor = "white"}},
                          new DiagramUmlClassAttribute(){ Name="languages",Type="string[*]", Style = new UMLParameterShapeStyle(){Color="white", StrokeColor = "white" }}
                    },
                    Methods = new ObservableCollection<DiagramUmlClassMethod>()
                {
                        new DiagramUmlClassMethod(){ Name="isDoctor",Type="bool", Style = new UMLParameterShapeStyle(){Color="white" , StrokeColor = "white"}},
                        new DiagramUmlClassMethod(){ Name="getHistory",Type="bool", Style = new UMLParameterShapeStyle(){Color="white" , StrokeColor = "white"}}
                    }
                },
                Classifier = ClassifierShape.Class
            }
        };
        NodeCollection.Add(node6);
        CreateNode("OperationStaff", 410, 455, "OperationStaff");
        CreateNode("Nurse", 410, 545, "Nurse");
        CreateNode("Surgeon", 240, 665, "Surgeon");
        CreateNode("AdministrativeStaff", 632, 605, "AdministrativeStaff");
        CreateNode("FrontDeskStaff", 630, 695, "FrontDeskStaff");
        CreateNode("TechnicalStaff", 928, 445, "TechnicalStaff");
        CreateNode("Technician", 815, 535, "Technician");
        CreateNode("Technologist", 1015, 535, "Technologist");
        CreateNode("SurgicalTechnologist", 1015, 630, "SurgicalTechnologist");

        CreateConnector("connect1", "Patient", "Person");
        CreateConnector("connect2", "Person", "Hospital");
        CreateConnector("connect3", "Department", "Hospital");
        CreateConnector("connect4", "OperationStaff", "Patient");
        CreateConnector("connect5", "Doctor", "OperationStaff");
        CreateConnector("connect6", "Nurse", "OperationStaff");
        CreateConnector("connect7", "Surgeon", "Doctor");
        CreateConnector("connect8", "FrontDeskStaff", "AdministrativeStaff");
        CreateConnector("connect9", "Technician", "TechnicalStaff");
        CreateConnector("connect10", "Technologist", "TechnicalStaff");
        CreateConnector("connect11", "SurgicalTechnologist", "Technologist");
        CreateConnector("connect12", "Staff", "Department");
        CreateConnector("connect13", "Staff", "Person");
        CreateConnector("connect14", "OperationStaff", "Staff");
        CreateConnector("connect15", "AdministrativeStaff", "Staff");
        CreateConnector("connect16", "TechnicalStaff", "Staff");

    }

    private void CreateNode(string id, double x, double y, string className)
    {
        DiagramNode diagramNode = new DiagramNode()
        {
            Id = id,
            OffsetX = x,
            OffsetY = y,
            Shape = new DiagramShape()
            {
                Type = DiagramShapes.UmlClassifier,
                ClassShape = new DiagramUmlClass()
                {
                    Name = className,
                    Style = new UMLClassShapeStyle() { Color = "white", StrokeColor = "white" }
                },
                Classifier = ClassifierShape.Class
            },
            Style = new NodeShapeStyle() { Fill = "#26A0DA", StrokeColor = "white" },
        };
        NodeCollection.Add(diagramNode);
    }

    private void CreateConnector(string id, string sourceId, string targetId)
    {
        DiagramConnector diagramConnector = new DiagramConnector()
        {
            Id = id,
            SourceID = sourceId,
            TargetID = targetId,
        };

        ConnectorCollection.Add(diagramConnector);
    }
}
